<script setup lang="ts">
import { Locale, Calendar, Empty } from "vant";
import enUS from "vant/es/locale/lang/en-US";
import { ref, onMounted } from "vue";
import { useI18n } from "vue-i18n";
import detalhado1 from "@/image/new_img/activity/afiliado_detalhado_1.png";
import NoData from "@/image/new_img/activity/no_data.svg";
import moment from "moment";
import { ActivityAxios } from "@/api";
import { AgentDetailInfoRes } from "@/types";
import { UserStore } from "@/store";
const userStore = UserStore();
const { t } = useI18n();
Locale.use("en-US", enUS);
const calendarShow = ref(false);
const startVal = ref(0);
const endVal = ref(0);
const maxDate = ref(new Date());
const onConfirm = e => {
  calendarShow.value = false;
  let time =
    moment(e).format("YYYY.MM.DD HH:mm") +
    " - " +
    moment(e).clone().add(1, "days").format("YYYY.MM.DD HH:mm");
  getTime.value = time.replace(/00:00/g, "08:00");

  const start = moment(e).format("YYYY-MM-DD HH:mm").replace(/00:00/g, "08:00");
  const end = moment(e)
    .clone()
    .add(1, "days")
    .format("YYYY-MM-DD HH:mm")
    .replace(/00:00/g, "08:00");
  startVal.value = moment(start, "YYYY-MM-DD HH:mm").valueOf();
  endVal.value = moment(end, "YYYY-MM-DD HH:mm").valueOf();
  getUnlimitedAgentDetailInfo();
};
//上一个月的当前时间
const minDate: any = ref(new Date(2024, 10, 18));
onMounted(() => {
  const start = moment().startOf("day").add(8, "hours").format("YYYY.MM.DD HH:mm");
  const end = moment().add(1, "days").startOf("day").add(8, "hours").format("YYYY.MM.DD HH:mm");
  startVal.value = moment(start, "YYYY-MM-DD HH:mm").valueOf();
  endVal.value = moment(end, "YYYY-MM-DD HH:mm").valueOf();
  getTime.value = start + " - " + end;
  if (userStore.isLogin) {
    getUnlimitedAgentDetailInfo();
  }

  const now = moment();

  // 获取上一个月的同一时间
  const lastMonthSameTime = now.clone().subtract(1, "month");
  // 检查是否为无效日期（如当前日期在上个月不存在）
  if (!lastMonthSameTime.isValid() || lastMonthSameTime.date() !== now.date()) {
    // 设置为本月的 1 号
    const lastSameTime = now.clone().startOf("month");
    minDate.value = new Date(lastSameTime.year(), lastSameTime.month(), lastSameTime.date());
  } else {
    const pastYear = lastMonthSameTime.year();
    const pastMonth = lastMonthSameTime.month();
    const pastDay = lastMonthSameTime.date();
    minDate.value = new Date(pastYear, pastMonth, pastDay);
  }
});
const getTime = ref("");
const showSelectList = ref(false);

const closefun = () => {
  showSelectList.value = false;
};
const detailInfo = ref<AgentDetailInfoRes>({
  list: [],
  oneDayTotalBet: 0,
  oneDayTotalCommissions: 0,
  oneDayTotalProportion: 0,
});
//const finished = ref(false);
const loading = ref(false);
const getUnlimitedAgentDetailInfo = () => {
  ActivityAxios.getUnlimitedAgentDetailInfo({
    endTime: endVal.value,
    startTime: startVal.value,
  })
    .then(res => {
      detailInfo.value = res;
      loading.value = false;
    })
    .finally(() => {
      loading.value = false;
    });
};
defineExpose({ closefun });
function formatNumber(num) {
  // 保留两位小数但不四舍五入
  const str = num.toString();
  const decimalIndex = str.indexOf(".");

  if (decimalIndex === -1) {
    return 0; // 没有小数部分，直接返回0
  }

  // 获取小数点后的两位数字（不进行四舍五入）
  const truncated = str.slice(0, decimalIndex + 3);

  // 判断小数部分是否为 ".00"
  const decimalPart = truncated.slice(decimalIndex + 1);
  if (decimalPart === "00") {
    return 0;
  }

  return truncated;
}
</script>
<template>
  <div class="select-conten-frame">
    <div class="content-div-frame" @click.stop="closefun">
      <div class="time-frame df jc-space-between ai-center" @click="calendarShow = true">
        <div class="time-text">{{ getTime }}</div>
        <div class="gettime-img df jc-center ai-center">
          <img class="sanjiao-img" src="@/image/new_img/activity/sanjiao_bai.png" />
        </div>
      </div>
      <div class="time-frame df jc-space-between ai-center time-frame1">
        <div class="time-text">{{ t("activity.distriAgent.teamCommittee") }}</div>
      </div>
      <div class="sheet-frame df">
        <img :src="detalhado1" />
        <div class="sheet-val-frame df">
          <div class="sheet1 df jc-center">
            <div class="symbol-frame">{{ t("currencyType.pt") }}</div>
            {{ detailInfo.oneDayTotalBet / 100 }}
          </div>
          <div class="sheet2 df jc-center">
            {{ formatNumber(Number(detailInfo.oneDayTotalProportion)) }}%
          </div>
          <div class="sheet3 df jc-center">
            <div class="symbol-frame">{{ t("currencyType.pt") }}</div>
            {{ detailInfo.oneDayTotalCommissions / 100 }}
          </div>
        </div>
      </div>
      <div class="list-frame">
        <div class="list-title-frame">
          <div class="title-content-frame">
            <div class="list-title-content df ai-center jc-center">
              <div class="title-content df ai-center jc-center">
                {{ t("activity.distriAgent.directPlayer") }}
              </div>
              <div class="title-content frame-title df ai-center jc-center">
                {{ t("activity.distriAgent.rollover") }}
              </div>
              <div class="title-content df ai-center jc-center">
                {{ t("activity.distriAgent.commission") }}
              </div>
            </div>
          </div>
        </div>

        <div class="underling-list-frame" v-if="detailInfo.list.length > 0">
          <!-- <List :finished="finished" finished-text="No more."> -->
          <div
            class="underling-list-constent df"
            v-for="(item, index) in detailInfo.list"
            :key="index"
          >
            <div class="df ai-center user-value11-account">
              <img class="avatar-img" :src="item.avatar" />
              <div class="underling-info">
                <div class="underling-name omit-1">{{ item.name }}</div>
                <div class="underling-id omit-1">ID:{{ item.uid }}</div>
              </div>
            </div>
            <div class="bet-val user-value11-account df ai-center jc-center">
              {{ item.bet / 100 }}
            </div>
            <div class="bet-val user-value11-account df ai-center jc-center">
              {{ item.commissions / 100 }}
            </div>
          </div>
          <!-- </List> -->
        </div>
      </div>
      <div class="no-more" v-if="detailInfo.list.length > 0">
        {{ t("gameDetail.nomore") }}
      </div>
      <Empty
        v-show="detailInfo.list.length === 0"
        image-size="150"
        :image="NoData"
        :description="t('gameLog.noRecordYet')"
      />
    </div>
    <Calendar
      v-model:show="calendarShow"
      :min-date="minDate"
      :max-date="maxDate"
      type="single"
      :show-confirm="false"
      @confirm="onConfirm"
    >
      <template #bottom-info> 08:00 </template>
    </Calendar>
  </div>
</template>
<style lang="less" scoped>
.select-conten-frame {
  width: 100%;
  height: 100%;
  margin: auto;
  margin-top: 40px;
  .content-div-frame {
    width: 100%;
    height: 100%;
    margin: auto;
    .time-frame {
      width: calc(100% - 76px);
      height: 66px;
      margin: auto;
      background-color: #ab3fe7;
      border-radius: 54px;
      transition: transform 0.2s ease-in-out;
      margin-bottom: 20px;
      position: relative;
      top: 0;
      left: 0;
      .time-text {
        color: #ffffff;
        font-weight: 700;
        font-size: 28px;
        margin-left: 30.9px;
      }
      .gettime-img {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        margin-right: 6.789px;
        background: rgba(255, 255, 255, 0.15);
        img {
          width: 21px;
          height: 21px;
        }
      }
      .typelist-frame {
        width: 100%;
        height: 108.766px;
        position: absolute;
        left: 0;
        top: 60px;
        z-index: 10;
        border-radius: 13.596px;
        background-color: #ab3fe7;
        overflow: hidden;
        padding-top: 13.596px;
        padding-bottom: 13.596px;
      }
      .sanjiao-frame {
        background-color: #ffffff;
      }
      .itemType {
        color: #ffffff;
        font-size: 23px;
        height: 54px;
        width: 100%;
        padding-left: 30.9px;
        overflow: hidden;
      }
      .is-select {
        background-color: #9000e0;
      }
    }
    .time-frame1 {
      margin-bottom: 10px;
    }
    .sheet-frame {
      width: 100%;
      height: 200px;
      position: relative;
      top: 0;
      left: 0;
      margin-bottom: 10px;
      img {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
      }
      .sheet-val-frame {
        width: calc(100% - 76px);
        height: 72px;
        position: absolute;
        top: 14px;
        left: 0;
        right: 0;
        margin: auto;
        .sheet1 {
          width: 300px;
          height: 100%;
          color: #ffffff;
          font-size: 40px;
          line-height: 110px;
        }
        .sheet2 {
          width: 134px;
          height: 100%;
          color: #ffffff;
          font-size: 40px;
          margin-left: 16px;
          line-height: 110px;
        }
        .sheet3 {
          flex: 1;
          height: 100%;
          color: #ffffff;
          font-size: 40px;
          line-height: 110px;
        }
        .symbol-frame {
          font-size: 24px;
          font-weight: 700;
          color: rgba(255, 255, 255, 0.45);
          margin-right: 6.18px;
        }
      }
    }
    .list-title-frame {
      width: 100%;
      height: 104px;
      background-image: linear-gradient(
        180deg,
        rgba(255, 255, 255, 0.15) 0%,
        rgba(255, 255, 255, 0) 100%
      );

      color: #ffffff;
      border-radius: 13.596px;
      overflow: hidden;
      .title-content-frame {
        width: 100%;
        height: 100%;
        background: rgba(255, 255, 255, 0.15);
      }
      .list-title-content {
        width: 100%;
        height: 100%;
        //background-color: rgba(255,255,255,0.15);
        .title-content {
          flex: 1;
          height: 41.39px;
          font-size: 21.417px;
        }
        .frame-title {
          border-right: 1px solid rgba(255, 255, 255, 0.15);
          border-left: 1px solid rgba(255, 255, 255, 0.15);
        }
      }
      .team-frame {
        width: 194.36px;
        height: 41.47px;
        font-size: 21.4174px;
        .team-content-frame {
          width: 80%;
        }
      }
      .team-frame1 {
        width: 137.41px;
        height: 41.47px;
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        font-size: 21.4174px;
      }
      .team-frame2 {
        width: 92.84px;
        height: 41.47px;
        border-right: 1px solid rgba(255, 255, 255, 0.15);
        border-left: 1px solid rgba(255, 255, 255, 0.15);
        font-size: 21.4174px;
      }
    }
  }
}
.list-frame {
  width: calc(100% - 76px);
  height: auto;
  margin: auto;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 20px;
}
:deep(.van-overlay) {
  background-color: rgba(0, 0, 0, 0.25);
  backdrop-filter: blur(5px);
}
.underling-list-frame {
  width: 100%;
  height: auto;
  background: rgba(255, 255, 255, 0.04);
}
.user-value11-account {
  width: 236px;
  height: 100px;
  .avatar-img {
    width: 50px;
    height: 50px;
    border-radius: 16px;
    margin-left: 22px;
  }
  .underling-info {
    margin-left: 10px;
    .underling-name {
      width: 150px;
      font-size: 24px;
      color: #ffffff;
      margin-bottom: 4px;
    }
    .underling-id {
      width: 150px;
      font-size: 20px;
      color: rgba(255, 255, 255, 0.45);
    }
  }
}
.bet-val {
  font-size: 24px;
  color: #ffffff;
}
.no-more {
  width: 100%;
  height: 106px;
  line-height: 106px;
  text-align: center;
  font-size: 28px;
  color: #969799;
}
</style>
